<template>
	<div>
		<div class="home_box">
			<div class="nav_box">
				<!-- <ul class="wai">
          <li>首页</li>
          <li>
            商品
            <ul class="neiqian">
              <li>商品列表</li>
              <li>添加商品</li>
              <li>商品分类</li>
              <li>商品类型</li>
            </ul>
          </li>
          <li>
            订单
            <ul>
              <li>订单列表</li>
              <li>订单设置</li>
              <li>退货申请处理</li>
              <li>退货原因设置</li>
            </ul>
          </li>
          <li>
            营销
            <ul>
              <li>秒杀活动列表</li>
              <li>优惠券列表</li>
              <li>品牌推荐</li>
              <li>新品推荐</li>
              <li>人气推荐</li>
              <li>专题推荐</li>
              <li>广告列表</li>
            </ul>
          </li>
          <li>
            权限
            <ul>
              <li>用户列表</li>
              <li>角色列表</li>
              <li>菜单列表</li>
              <li>资源列表</li>
            </ul>
          </li>
        </ul> -->
				<el-menu
					default-active="2"
					class="el-menu-vertical-demo"
					@open="handleOpen"
					@close="handleClose"
					router
				>
					<el-menu-item index="/layout">
						<i class="el-icon-menu1"></i>
						<span slot="title">首页</span>
					</el-menu-item>

					<el-submenu index="/shop">
						<template slot="title">
							<i class="el-icon-location2"></i>
							<span>商品</span>
						</template>
							<el-menu-item index="/shop">商品列表</el-menu-item>
							<el-menu-item index="/shopPush">添加商品</el-menu-item>
							<el-menu-item index="/shopClass">商品分类</el-menu-item>
							<el-menu-item index="/shopType">商品类型</el-menu-item>
					</el-submenu>

						<el-submenu index="/shop">
						<template slot="title">
							<i class="el-icon-location2"></i>
							<span>订单</span>
						</template>
							<el-menu-item index="/shop/nav" style="box-sizing:border-box">订单列表</el-menu-item>
							<el-menu-item index="/nav">订单设置</el-menu-item>
							<el-menu-item index="/nav">退货申请处理</el-menu-item>
							<el-menu-item index="/nav">退货原因设置</el-menu-item>
					</el-submenu>

					<el-submenu index="4">
						<template slot="title">
							<i class="el-icon-location4"></i>
							<span>营销</span>
						</template>
						<el-menu-item-group>
							<template slot="title">秒杀活动列表</template>
						</el-menu-item-group>
						<el-menu-item-group>
							<template slot="title">优惠券列表</template>
						</el-menu-item-group>
						<el-menu-item-group>
							<template slot="title">品牌推荐</template>
						</el-menu-item-group>
						<el-menu-item-group>
							<template slot="title">新品推荐</template>
						</el-menu-item-group>
						<el-menu-item-group>
							<template slot="title">人气推荐</template>
						</el-menu-item-group>
						<el-menu-item-group>
							<template slot="title">专题推荐</template>
						</el-menu-item-group>
						<el-menu-item-group>
							<template slot="title">广告推荐</template>
						</el-menu-item-group>
					</el-submenu>

					<el-submenu index="5">
						<template slot="title">
							<i class="el-icon-location5"></i>
							<span>权限</span>
						</template>
						<el-menu-item-group>
							<template slot="title">用户列表</template>
						</el-menu-item-group>
						<el-menu-item-group>
							<template slot="title">角色列表</template>
						</el-menu-item-group>
						<el-menu-item-group>
							<template slot="title">菜单列表</template>
						</el-menu-item-group>
						<el-menu-item-group>
							<template slot="title">资源列表</template>
						</el-menu-item-group>
					</el-submenu>
				</el-menu>
			</div>
			<div class="Components_View">
				<div class="header_box"></div>
				<!-- <Layout/> -->
				<router-view></router-view>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			show: '首页',
		}
	},
	methods: {
		// 菜单
		handleOpen(key, keyPath) {
			console.log(key, keyPath)
		},
		handleClose(key, keyPath) {
			console.log(key, keyPath)
		},
		
	},

	mounted() {
		// this.ComShow('首页')
	},
}
</script>

<style lang="scss">
@import './Home.scss';
</style>
